<template>
    <div class="home">
    <transition name="fade" @touchmove.stop.prevent>
      <div class="menu-mask" v-show="isRellyShow" @click="hideSide"></div>
    </transition>
    <transition name="slide-fade">
    <!-- 这里是侧栏代码部分 -->
      <div class="side-content" v-show="isRellyShow">
      <mt-cell title="首页"></mt-cell>
      <mt-cell title="订单-整车"></mt-cell>
      <mt-cell title="订单-金融"></mt-cell>
      <mt-cell title="订单-整车"></mt-cell>
      <mt-cell title="订单-保险"></mt-cell>
      <mt-cell title="库存列表"></mt-cell>
      <mt-cell title="车辆查询"></mt-cell>
      <mt-cell title="开票统计"></mt-cell>
      <mt-cell title="客户列表"></mt-cell>
      </div>    
    </transition>
    </div>
</template>

<script>
  export default {
    components:{},
    data () {
      return {

      }
    },
    methods: {
      hideSide:function(){
        this.$store.dispatch('hideSideBar');
      }
    },
    computed:{
      isRellyShow(){
        return this.$store.getters.isShowMethod;
      }
    },
    mounted:function(){

    }
  }
</script>

<style scoped>
  .menu-mask{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    opacity: 1;
    z-index:10;
    background:rgba(0,0,0,0.5);
  }
  .side-content{
    z-index: 11;position:fixed;width: 12rem;
    height: 100%;
    background: #333333;
    top: 0;
    left: 0;
    bottom: 0;
    -webkit-overflow-scrolling:touch;
    opacity: 0.8;
  }
  .fade-enter-to, .fade-leave-to{
    transition: opacity 0.3s
  }
  .fade-enter, .fade-leave-to{
    opacity: 0
  }


  .slide-fade-enter-to, .slide-fade-leave-to{
    transition: transform 0.3s;
    transform:translate(0px,0px);
  }
  .slide-fade-enter, .slide-fade-leave-to{
     opacity: 0;
     -webkit-transform:translate(-12rem,0px);
     transform:translate(-12rem,0px);
     -webkit-transition:opacity 0.3s ease-in-out 0.3s,-webkit-transform 0.3s ease-in-out;
     transition: opacity 0.3s ease-in-out 0.3s,transform 0.3s ease-in-out;
  }



</style>
